<template>
    <!-- 应用与基本属性页面的特定组件 -->
    <!-- 基本属性页面未关联分类属性 -->
    <div class="unlinked_attribute">
        <card :title="`${categoryName}未关联分类的属性`">
            <template #actions>
                <el-input
                    class="w-48"
                    v-model="queryString"
                    placeholder="按属性名查询"
                    prefix-icon="el-icon-search"
                    clearable
                />
            </template>
            <template #default>
                <el-table :data="tableData" @selection-change="handleSelect">
                    <el-table-column type="selection" />
                    <el-table-column prop="attrName" label="属性名" />
                    <el-table-column label="操作">
                        <template #default="{ row }">
                            <el-button type="text" @click="link(row.attrId, row.attrName)">关联</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <template #bottom-left>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>

            <template #bottom-right>
                <!-- 可选属性组 -->
                <el-select class="w-48" v-model="attributeGroupId" placeholder="可选属性组" clearable>
                    <el-option
                        v-for="item in attributeGroups"
                        :key="item.attrGroupId"
                        :value="item.attrGroupId"
                        :label="item.attrGroupName"
                    />
                </el-select>
                <el-button type="primary" :disabled="isLinkingButtonDisabled" @click="link">关联所选</el-button>
            </template>
        </card>
    </div>
</template>

<script>
import { getQueryOptions } from '../../mixins';

export default {
    data() {
        return {
            tableData: [],

            selectedId: [],
            selectedNames: [],

            attributeGroupId: '',
        };
    },

    props: ['categoryId', 'categoryName', 'attributeGroups'],

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/pms/findAttrNotSpecs',
            paginable: true,
            params: {
                queryString: 'attrName',
                categoryId: 'catalogId',
            },
        }),
    ],

    computed: {
        // 关联所选属性按钮是否禁用
        isLinkingButtonDisabled() {
            return !this.selectedId.length;
        },

        // 所选属性组
        attributeGroupName() {
            return this.attributeGroupId
                ? this.attributeGroups.find(item => item.attrGroupId === this.attributeGroupId).attrGroupName
                : '无';
        },
    },

    watch: { categoryId: 'query' },

    methods: {
        // 关联
        link(id, name) {
            id = typeof id === 'number' ? id : this.selectedId.toString();
            name = name || this.selectedNames.toString();

            let $this = this;

            let alert = this.$createElement(
                'el-alert',
                { props: { type: 'success' } },
                '此操作可将所选属性与产品分类和属性组进行关联'
            );

            let currentCategoryEl = this.$createElement('p', null, '当前分类：' + this.categoryName);
            let selectedNameEl = this.$createElement('p', null, '所选属性：' + name);
            let selectedAttributeGroupEl = this.$createElement('p', null, '所选属性组：' + this.attributeGroupName);
            let message = this.$createElement('div', null, [
                alert,
                currentCategoryEl,
                selectedNameEl,
                selectedAttributeGroupEl,
            ]);

            this.$msgbox({
                title: '关联提示',
                message,
                showClose: false,
                showCancelButton: true,
                closeOnClickModal: false,
                beforeClose(action, instance, done) {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;

                        this.$put('/yxl/pms/saveAttrCatalogGroup', {
                            catalogId: $this.categoryId,
                            attrIds: id,
                            attrGroupId: $this.attributeGroupId,
                        }).then(res => {
                            done();
                            instance.confirmButtonLoading = false;
                            $this.$emit('linked');
                        });
                    } else {
                        done();
                    }
                },
            })
                .then(res => {
                    this.attributeGroupId = '';
                    this.query();
                })
                .catch(err => {});
        },

        // 处理选择
        handleSelect(selectedRows) {
            this.selectedId = selectedRows.map(row => row.attrId);
            this.selectedNames = selectedRows.map(row => row.attrName);
        },
    },
};
</script>